<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>九刀流导航</title>
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
    <script type="application/javascript" th:src="@{/js/jquery.min.js}"></script>

</head>
<body id="body">
<div class="container-fluid">
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container">
            <a class="navbar-brand" href="#">九刀流</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample07"
                    aria-controls="navbarsExample07" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarsExample07">
                <ul class="navbar-nav mr-auto" id="models">
                    <li class="nav-item active">
                        <a class="nav-link" href="#" onclick="doClick(this.id)">Home <span
                                class="sr-only">(current)</span></a>
                    </li>
                </ul>
                <form class="form-inline my-2 my-md-0">
                    <input class="form-control" type="text" placeholder="正在开发中..." aria-label="Search">
                </form>
            </div>
        </div>
    </nav>
</div>
<div class="container-fluid" id="show">
    <div class="row">
        <div class="col"></div>
        <div class="col-10">
            <div class="row" id="top">
            </div>
        </div>
        <div class="col"></div>
    </div>
</div>
<script>
    /**
     * 初始化数据(默认显示常用数据)
     * */
    $(function () {
        //加载模块数据
        var url2 = "/model/find/all"
        getModelsData(url2)
        //默认加载第一模块的数据
    })

    /**
     *
     * 点击事件,切换数据
     * */
    function doClick(id) {
        var modelid = "/source/findbymodelid/use/" + id;
        getData(modelid)

    }

    /**
     * 获取数据函数
     * @param par
     */
    function getData(url) {
        $.get(url, function (data) {
            if (200 == data.code) {
                showSources(data.data)
            }
            if (404 == data.code) {
                alert("当前模块暂无数据")
            }
        })
    }

    function getModelsData(url2) {
        $.get(url2, function (data) {
            if (200 == data.code) {
                showModels(data.data)
            }
            if (404 == data.code) {
                alert("当前模块暂无数据")
            }
        })
    }

    /**
     * 渲染资源数据
     *
     *
     * */
    function showSources(data) {
        $("#top").empty();
        $.each(data, function (i, e) {
            $("#top").append("<div class='row' id='top'><div class='col-2' style='padding-top: 20px ;padding-left: 20px'><a target='_blank' href='" + e.sourcesUrl + "'><canvas id='img" + i + "' width='240' height='120'></canvas></a></div></div>")
            icon("img" + i, e.sourcesName)
        })
    }

    function showModels(data) {
        $.each(data, function (i, e) {
            $("#models").append("<li class='nav-item'><a class='nav-link' href='#' id='" + e.id + "' onclick='doClick(this.id)'>" + e.modelName + "</a><span hidden = hidden>" + e.id + "</span></li>")
        })
        var modelid = $("#models li:eq(1) span").html();
        var url = "/source/findbymodelid/use/" + modelid;
        getData(url)
    }


    function icon(id, text) {
        var color = ["#FFB6C1", "#FFC0CB", "#DC143C", "#DB7093", "#FF69B4", "#FF1493",
            "#00AEB9", "#4DBEEE", "#9acd32", "#F3AA4D", "#E14A63", "#9992FF"];
        var len = color.length - 1;
        var index = Math.round(Math.random() * len);
        // console.log(len)
        // console.log(index)
        console.log(index + ": " + color[index])

        var c = document.getElementById(id);
        var ctx = c.getContext("2d");

        ctx.beginPath();
        ctx.fillStyle = "#ffffff";
        ctx.font = "40px Arial";
        ctx.textAlign = "center";
        ctx.fillText(text, 120, 70);
        ctx.fill();

        ctx.globalCompositeOperation = "destination-over";
        //ctx.globalCompositeOperation="xor";

        ctx.beginPath();
        ctx.fillStyle = color[index];
        ctx.fillRect(0, 0, 240, 120);
        ctx.closePath();
    }
</script>
<script type="text/javascript " color="0,104,183 " opacity='1' zIndex="-1 " count="100 "
        th:src="@{/js/line.js} "></script>
</body>
</html>